<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title><%= title %></title>
  <link rel="stylesheet" href="/stylesheets/regist.css">
  <script src="/js/jquery-3.1.1.js"></script>
</head>
<body>
<h1 class="reg">微 博</h1>
<div class="">
  <form action="regist" method="post">
    <% if(success) {%>
    <%= success %>
    点击<a href="/">登录</a>
    <% }%>
    <% if(error) {%>
    <%= error %>
    <% }%>
    <h3>注册微博</h3>
    <label for="#">用&nbsp;&nbsp;户&nbsp;名&nbsp;:</label>
    <input class="ming" type="text"name="name" maxlength="6" placeholder="用户名不能为空或超过6字符">
    <span>请输入用户名</span><br>
    <label for="#">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
    <input class="mima" type="password"name="password" placeholder="密码必须是6-10位字母和数字组合">
    <span>请输入密码</span><br>
    <label for="#">确认密码:</label>
    <input class="mima2" type="password" name="password-repeat" placeholder="请再次输入密码">
    <span>两次密码必须保持一致</span><br>
    <label for="#">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</label>
    <input class="tel" type="text" name="tel" placeholder="请输入有效电话号码">
    <span>请输入有效电话号码</span><br>
    <label for="#">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</label>
    <input class="email" type="text" name="email" placeholder="请输入有效邮箱">
    <span>请输入有效邮箱</span><br>
    <input class="log" type="submit" disabled="disabled" value="立即注册">
    <section>已有账号，直接<a href="/">登录</a></section>
  </form>
</div>
</body>
<script>
  $(function () {
    $('.mima').blur(function () {
      var a = $(this).val();
      var pat = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
      if(pat.test(a)){
        $(this).next().text('格式正确')
      }else {
        $(this).next().text('密码格式错误')
      }
      check();
    })
    $('.ming').blur(function () {
      var a = $(this).val();
      if(a == ''){
        $(this).next().text('格式错误')
      }else{
        $(this).next().text('格式正确')
      }
      check();
    })
    $('.mima2').blur(function () {
      var a = $(this).val();
      var b = $('.mima').val();
      if(a == b){
        $(this).next().text('格式正确')
      }else{
        $(this).next().text('两次密码必须保持一致')
      }
      check();
    })
    $('.tel').blur(function () {
      var a = $(this).val();
      var pat = /^1[34578]\d{9}$/;
      if(pat.test(a)){
        $(this).next().text('格式正确')
      }else{
        $(this).next().text('请输入有效电话号码')
      }
      check();
    })
    $('.email').blur(function () {
      var a = $(this).val();
      var pat = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      if(pat.test(a)){
        $(this).next().text('格式正确')
      }else{
        $(this).next().text('请输入有效邮箱')
      }
      check();
    })
    function check() {
      if($('.ming').next().text()=='格式正确'
              & $('.mima').next().text()=='格式正确' & $('.mima2').next().text()=='格式正确'
              & $('.tel').next().text()=='格式正确' & $('.email').next().text()=='格式正确'){
        $('.log').prop('disabled','')
      }
    }
  })
</script>
</html>
